<template>
	<view>
		<view class="tip_top_message" v-if="registeringData.state==1">
			<!--未支付状态-->
			<view class="time_icon"></view>
			<b>待付款</b>
			<span class="right">剩余支付时间：45分60秒</span>
		</view>
		<view class="tip_top1_message" v-if="registeringData.state==2">
			<!--已支付待就诊-->
			<view class="time_icon"></view>
			<b>待接诊</b>
			<span class="right">2天5时45分60秒</span>
		</view>
		<view class="tip_top2_message" v-if="registeringData.state==4">
			<!--已支付待就诊-->
			<view class="time_icon"></view>
			<b>超时未就诊</b>
			<span class="right"></span>
		</view>
		<view class="registering_info">
			<ul>
				<li><label>挂号医生</label><view class="right">{{registeringData.医生}}</view></li>
				<li><label>挂号科室</label><view class="right">{{registeringData.科室}}</view></li>
				<li><label>预约时间</label><view class="right">{{registeringData.预约时间}}</view></li>
				<li><label>预约时段</label><view class="right">{{registeringData.预约时段}}</view></li>
				<li><label>挂号费</label><view class="right">{{registeringData.挂号费}}元</view></li>
				<li><label>下单时间</label><view class="right">{{registeringData.下单时间}}</view></li>
			</ul>
		</view>
		<view class="user_info">
			<ul>
				<li><b>{{registeringData.用户姓名}}</b>({{registeringData.用户身份证}}) <view class="right">{{registeringData.年龄}} {{registeringData.性别}}</view></li>
				<li><label>手机号</label><view class="right"> {{registeringData.手机号}}</view></li>
			</ul>
		</view>
		<button class="cancel_registering" @click="cancelRegistering()" v-if="registeringData.state==1||registeringData.state==2">取消挂号</button>
		<view class="pay_info" v-if="registeringData.state==1">
			<span>合计</span> <h2>{{registeringData.挂号总金额}}元</h2>
			<button class="pay_btn" @click="payment">微信支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				registeringData:{
					"医生":"张医生",
					"科室":"内科",
					"预约时间":"2022-01-11",
					"预约时段":"09:00-12:00",
					"挂号费":"6.00",
					"下单时间":"2022-01-11 09:00:00",
					"用户姓名":"张三",
					"用户身份证":"522423199309150033",
					"年龄":"27",
					"性别":"男",
					"手机号":"18212792844",
					"挂号总金额":"6.00",
					"state":"1"//就诊状态 1 未支付 2 已支付未就诊 3 已就诊 4  已支付未就诊
				}
			}
		},
		onLoad() {
			
		},
		methods: {
			init(){
				//初始化数据
				
			},
			payment(){
				//进行支付
			},
			cancelRegistering(){
				//取消挂号
				uni.showToast({
					icon:"success",
					title:"取消成功"
				});
			}
		}
	}
</script>

<style>
.tip_top_message{
	width: 90%;
	padding: 15px;
	margin: 0 auto;
	border-radius: 8px;
	background: #FFBF58;
	margin-top: 20px;
	color: #FFFFFF;
	text-indent: 1em;
	
}
.tip_top_message .time_icon{
	float: left;
	width: 24px;
	height: 24px;
	background-image: url(../../static/159@2x.png);
	background-size:100% 100%;
	background-repeat: no-repeat;
	
}
.tip_top1_message{
	width: 90%;
	padding: 15px;
	margin: 0 auto;
	border-radius: 8px;
	background: #3692FF;
	margin-top: 20px;
	color: #FFFFFF;
	text-indent: 1em;
	
}
.tip_top1_message .time_icon{
	float: left;
	width: 24px;
	height: 24px;
	background-image: url(../../static/173@2x.png);
	background-size:100% 100%;
	background-repeat: no-repeat;
	
}
.tip_top2_message{
	width: 90%;
	padding: 15px;
	margin: 0 auto;
	border-radius: 8px;
	background: #999999;
	margin-top: 20px;
	color: #FFFFFF;
	text-indent: 1em;
	
}
.tip_top2_message .time_icon{
	float: left;
	width: 24px;
	height: 24px;
	background-image: url(../../static/140@2x.png);
	background-size:100% 100%;
	background-repeat: no-repeat;
	
}
.registering_info,.user_info{
	width: 86%;
	margin: 0 auto;
	background-color: #FFFFFF;
	border-radius: 8px;
	padding-left: 20px;
	padding-right: 20px;
	
}
.registering_info{
	margin-top: 20px;
}
.registering_info ul li{
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #F5F5F5;
}
.user_info{
	margin-top: 10px;
}
.user_info ul li{
	height: 50px;
	line-height: 50px;
	border-bottom: 1px solid #F5F5F5;
}
.cancel_registering{
	width: 96%;
	margin-top: 10px;
	background-color: #FFFFFF;
	border: none;
	color: #999999;
	border-radius: 8px;
}
.pay_info{
	position: fixed;
	bottom: 0px;
	width: 100%;
	background-color: #FFFFFF;
	display: flex;
	padding: 20px;
	line-height: 46px;
}
.pay_info h2{
	color:#3692FF;
	margin-left: 20px;
}
.pay_info .pay_btn{
	background-color: #3692FF;
	color: #FFFFFF;
	width: 142px;
	height: 46px;
	font-size: 16px;
	border-radius: 28px;
	line-height: 46px;
	margin-right: 50px;
}
</style>
